<template>
    <view class="container">
        <!-- 行程信息头部 -->
        <view class="trip-header">
            <view class="route">
                <view class="route-left">
                    <text class="city">{{ detailsInfo.line.start.name }}</text>
                    <image src="/static/home/line.png" class="arrow-line-icon"></image>
                    <text class="city">{{ detailsInfo.line.end.name }}</text>
                </view>
            </view>
            <view class="divider"></view>
            <view class="owners-trip-item-detail">
                <view class="owners-departure-info">
                    <view class="time"><text class="start-label">出发</text> {{ detailsInfo.line.start_time }}</view>
                    <!-- 未开始之前 -->
                    <view class="contact" v-if="true">
                        <text class="label">余座：</text>
                        <text class="value">{{ detailsInfo.line.current_seats - detailsInfo.line.on_order }}</text>
                    </view>
                </view>
                <view class="trip-location-info">
                    <view>
                        <view class="departure">{{ detailsInfo.line.start_title }}</view>
                        <view class="location">
                            <image src="/static/home/line.png" class="arrow-line-icon rotate-element"></image>
                            <text class="label">途径：</text>{{ detailsInfo.line.approach }}
                        </view>
                        <view class="destination">{{ detailsInfo.line.end_title }}</view>
                    </view>
                    <view class="trips-info">
                        <view class="pay-state pay-done-state"><text class="price-unit">￥</text>{{
                            detailsInfo.line.unit_price }}</view>
                    </view>
                </view>
            </view>
            <!-- 座位信息 -->
            <view class="info-card" v-if="true">

                <view class="info-item">
                    <view class="info-label">车主</view>

                    <view class="info-value"
                        @click="navigateTo(`/pages/home/queryOwners/ownerEvaluate/index?uid=${detailsInfo.line.uid}&uname=${detailsInfo.carOwner.real_name}&num=${detailsInfo.carOwner.honesty}`)">
                        {{ detailsInfo.carOwner.real_name }}
                        <image class="to-detail-icon" src="/static/personalCenter/black-right.png" mode="aspectFill">
                        </image>
                    </view>
                </view>
                <view class="info-item">
                    <view class="info-label">车型</view>
                    <view class="info-value">{{ detailsInfo.line.brand_model }} {{ detailsInfo.line.seats }}座</view>
                    <view class="car-type" :class="{ 'car-type-gray': detailsInfo.carOwner.type_text == '非营运' }">
                        <image v-if="detailsInfo.carOwner.type_text == '非营运'" class="car-icon"
                            src="/static/home/no-car.png" mode="aspectFill"></image>
                        <image v-else class="car-icon" src="/static/personalCenter/car.png" mode="aspectFill"></image>
                        <text class="car-type-name">{{ detailsInfo.carOwner.type_text }}</text>
                    </view>
                </view>
                <view class="info-item">
                    <view class="info-label">备注</view>
                    <view class="info-value note-value">{{ detailsInfo.line.remark }}
                    </view>
                </view>
                <view class="info-item" v-if="false">
                    <view class="info-label">预定</view>
                    <view class="info-value note-value">api.mszcdf.cn
                    </view>
                </view>
            </view>
        </view>
        <!-- 车主车辆信息 -->
        <view class="driver-section">
            <view class="section-title car-model">车主</view>
            <view class="car-info">
                <text class="driver-name">{{ detailsInfo.carOwner.real_name }}</text>
                <text class="driver-name driver-tel">{{ detailsInfo.line.phone }}</text>
                <text class="driver-label">(预定后完整显示)</text>
            </view>
            <view class="divider"></view>
            <view class="section-title car-model">车型</view>
            <view class="car-info">
                <text class="driver-name">{{ detailsInfo.line.brand_model }} {{ detailsInfo.line.seats }}座</text>
                <view class="car-type" :class="{ 'car-type-gray': detailsInfo.carOwner.type_text == '非营运' }">
                    <image v-if="detailsInfo.carOwner.type_text == '非营运'" class="car-icon" src="/static/home/no-car.png"
                        mode="aspectFill"></image>
                    <image v-else class="car-icon" src="/static/personalCenter/car.png" mode="aspectFill"></image>
                    <text class="car-type-name">{{ detailsInfo.carOwner.type_text }}</text>
                </view>
            </view>
        </view>
        <!-- 备注信息 -->
        <view class="note-section" v-if="true">
            <view>
                <text class="label">备注：</text>
                <text>{{ detailsInfo.line.remark }}</text>
            </view>
        </view>
        <view class="aside-info" v-if="true">
            可粘贴或分享至微信等拼车群
        </view>

        <!-- 行程已完成 操作按钮 -->
        <view class="action-buttons">
            <view v-if="true" class="action-btn share" @click.stop="showShare(detailsInfo)">
                <image class="share-icon" src="/static/personalCenter/share-icon.png" mode="aspectFill"></image>
                转发分享
            </view>
            <!--  -->
            <view v-if="true" class="action-btn cancel"
                @click="navigateTo(`/pages/home/queryOwners/scheduledSeat/index?lid=${detailsInfo.line.id}`)">预定座位
            </view>
            <view v-if="true" class="action-btn cancel" @click="oneClickCopy(detailsInfo)">
                <image class="share-icon" src="/static/home/copy.png" mode="aspectFill"></image>
                一键复制
            </view>
        </view>
        <!-- 温馨提示 -->
        <view class="tips-section" style="text-align: center;">
            <view class="tips-text">新用户通过您的分享链接成功注册将成为您的推广成员</view>
            <view class="tips-text">推广规则详情在<text style="color: #FF7937">个人中心-我的推广</text>查看</view>
        </view>

        <!-- 分享引导蒙层 -->
        <share-guide :show.sync="showGuide" :shareData="shareData"></share-guide>
    </view>
</template>

<script>
import shareGuide from '../../../common/ShareGuide.vue'
import { formatDateTime } from '@/utils/dateTimeFormatter.js';
export default {
    components: {
        shareGuide
    },
    data() {
        return {
            showGuide: false,
            shareData: {
                title: '拼车出行，绿色环保',
                desc: '发现更多拼车路线，省钱又环保',
                link: '',
                imageUrl: 'https://carpool.mszcdf.cn/static/logo.png'
            },
            userInfo: {},
            detailsInfo: {}
        }
    },
    onShow(options) {


    },
    onLoad(option) {
        this.userInfo = uni.getStorageSync('userInfo')
        this.getData(option.id)

    },
    methods: {
        async getData(id) {
            let url = `/h5/line/detail/${id}`
            try {
                const data = await this.$http.get(url)
                this.detailsInfo = data.data
                this.detailsInfo.line.start_time = formatDateTime(this.detailsInfo.line.start_time)
            } catch (error) {}
        },
        // 显示分享弹窗
        showShare(data) {
            this.showGuide = true
        },
        oneClickCopy(data) {
            
            uni.showLoading({
                title: "复制中...",
            });
            const content = `【路线】${data.line.start.name}-${data.line.end.name}
【出发时间】${data.line.start_time}
【出发地】${data.line.start.name}·${data.line.start_title}
【目的地】${data.line.end.name}·${data.line.end_title}
【途经】${data.line.approach}
【车主】${data.carOwner.real_name}
【车型】${data.line.brand_model}【${data.line.seats}座】-${data.carOwner.type_text}车
【单座价格】${data.line.unit_price}元/座
【备注】${data.line.remark}
【预订】carpool.mszcdf.cn`;
            uni.setClipboardData({
                data: content,
                success: () => {
                    uni.hideLoading();
                    // 移除复制成功提示，静默复制
                },
                fail: () => {
                    uni.hideLoading();
                    uni.showToast({
                        title: '复制失败',
                        icon: 'none'
                    });
                }
            });
        },
        // 导航到指定页面
        navigateTo(url) {
            uni.navigateTo({
                url: url,
            });
        },
    }
}
</script>

<style scoped lang="scss">
/* 行程头部样式 */
.trip-header {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 36rpx 0rpx 50rpx 20rpx;
    margin: 20rpx 26rpx;
}

.to-detail-icon {
    width: 28rpx;
    height: 28rpx;
}

.arrow-line-icon {
    width: 64rpx;
    height: 7rpx;
    margin: 0 18rpx;
}

.rotate-element {
    margin: 0;
    transform: rotate(90deg);
    /* 顺时针旋转45度 */
    transform-origin: center center;
    /* 旋转中心点，默认是元素中心 */
    position: absolute;
    bottom: 12rpx;
    left: -22rpx;
}

.route {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.route-left {
    display: flex;
    align-items: center;
}

.city {
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
}

.owners-trip-item-detail {
    padding-top: 32rpx;
}

.owners-departure-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 40rpx;
}

.trip-location-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.time {
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
    margin-bottom: 20rpx;
}

.time .start-label {
    display: inline-block;
    width: 88rpx;
    height: 40rpx;
    background: #FF7937;
    border-radius: 32rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 40rpx;
    text-align: center;
    margin-right: 12rpx;
}

.departure,
.destination {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 28rpx;
    color: #0B1F20;
    line-height: 42rpx;
    position: relative;
    padding-left: 36rpx;
}

.departure::before {
    content: "";
    position: absolute;
    bottom: 12rpx;
    left: 0;
    width: 16rpx;
    height: 16rpx;
    background: #00cfab;
    border-radius: 50%;
}

.destination::before {
    content: "";
    position: absolute;
    bottom: 12rpx;
    left: 0;
    width: 16rpx;
    height: 16rpx;
    background: #FF7937;
    border-radius: 50%;
}

.location,
.contact {
    font-size: 28rpx;
    color: #666;
    margin-top: 10rpx;
    margin-bottom: 12rpx;
    position: relative;
    padding-left: 34rpx;
}

.location .label,
.contact .label {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24rpx;
    color: #666666;
    line-height: 36rpx;
}

.contact .value {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #FF7937;
    line-height: 48rpx;
}

.trips-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40rpx;
}

.pay-state {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 700;
    font-size: 36rpx;
    color: #FF7937;
    line-height: 36rpx;
}

.price-unit {
    font-size: 24rpx;
    color: #FF7937;
}

.pay-done-state {
    font-size: 48rpx;
    color: #0B1F20;
}

.pay-done-state .price-unit {
    color: #0B1F20;
}

/* 车辆样式 */
.driver-section {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 36rpx 20rpx 50rpx 20rpx;
    margin: 20rpx 26rpx;
}

.section-title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 28rpx;
    color: #0B1F20;
    margin-bottom: 32rpx;
}

.driver-info {
    margin-bottom: 15px;
}

.driver-name {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
}

.driver-phone {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
    padding-left: 104rpx;
}

.driver-phone-tips {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24rpx;
    color: #999999;
}

.car-info {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    padding-bottom: 26rpx;
}

.car-model {
    padding-top: 22rpx;

}


.divider {
    height: 2rpx;
    background-color: #eee;
}

.car-type {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88rpx;
    height: 32rpx;
    border-radius: 4rpx;
    border: 1rpx solid rgba(255, 121, 55, 0.5);
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 20rpx;
    color: #FF7937;
    margin-left: 10rpx;
}

.car-type-gray {
    color: #999999;
    border: 1rpx solid #999999;
}

.car-icon {
    width: 19rpx;
    height: 16rpx;
    padding-right: 4rpx;
}

.driver-tel {
    padding-left: 104rpx;
}

.driver-label {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24rpx;
    color: #999999;
    line-height: 28rpx;
    padding-left: 10rpx;
}

.note-section {
    padding: 32rpx 0 32rpx 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    margin: 20rpx 26rpx;
    font-size: 24rpx;
    color: #666666;
}

.note-section .label {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24rpx;
    color: #999999;
    line-height: 36rpx;
}

/*  */
.aside-info {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24rpx;
    color: #FF7937;
    line-height: 48rpx;
    text-align: center;
}

/* 操作按钮样式 */
.action-buttons {
    display: flex;
    justify-content: space-between;
    margin: 20rpx 26rpx;
}

.action-btn {
    flex: 1;
    text-align: center;
    padding: 26rpx 0;
    border-radius: 16rpx;
}

.share {
    background-color: #fff;
    color: #666666;

}

.cancel {
    background: linear-gradient(90deg, #FF3F39 0%, #FF7937 100%);
    color: #fff;
    margin-left: 20rpx;
}

.publish {
    background: linear-gradient(90deg, #FF3F39 0%, #FF7937 100%);
    color: #fff;
}

.share-icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 16rpx;
}

/* 温馨提示样式 */
.tips-section {
    padding: 20rpx 64rpx;
}


.tips-text {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    line-height: 48rpx;
}

/*  */
.info-card {
    padding-right: 20rpx;
}

.info-item {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    padding: 34rpx 0;
    border-bottom: 2rpx solid #eee;

}

.info-item:last-child {
    border-bottom: none;
}

.car-type {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88rpx;
    height: 32rpx;
    border-radius: 4rpx;
    border: 1rpx solid rgba(255, 121, 55, 0.5);
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 20rpx;
    color: #FF7937;
    margin-left: 10rpx;
}
.car-type-gray {
    color: #999999;
    border: 1rpx solid #999999;
}

.car-icon {
    width: 19rpx;
    height: 16rpx;
    padding-right: 4rpx;
}

.info-label {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 28rpx;
    color: #0B1F20;
    line-height: 28rpx;
    padding-right: 64rpx;
}

.info-value {
    display: flex;
    align-items: center;
    justify-content: end;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
    line-height: 28rpx;
}

.note-value {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 28rpx;
    color: #999999;
    line-height: 28rpx;
}

.info-value .input {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
    line-height: 28rpx;
    text-align: right;
    display: inline-block;
}

.edit-contacts-icon {
    width: 32rpx;
    height: 32rpx;
    padding-left: 14rpx;
}

.to-detail-icon {
    width: 28rpx;
    height: 28rpx;
}
</style>